<template>
  <div>
    <!-- 条件渲染 -- 一定要在有异常请求时，加上 -->
    <loading v-if="!filminfo" />
    <template v-else>
      <topnav :title="filminfo.name" />
      <container :info="filminfo" />
    </template>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import container from './ui/container.vue'
import topnav from './ui/topnav.vue'
export default {
  components: { topnav, container },
  // 组件内守卫 -- 它是组件生命周期都还没有执行时就会触发，所以在此处写，有利用组件优化
  beforeRouteEnter(to, from, next) {
    let id = to.params.id || 0
    if (isNaN(Number(id)) || id === 0) {
      next('/404')
    } else {
      // 符合条件要让它继续向下
      next()
    }
  },

  computed: {
    // 参数1：命名空间名称 自动导入，文件名称就是命名空间名称
    // 参数2: 数组，数组中的元素就是state中的key
    ...mapState('film', ['filminfo']),
  },

  created() {
    //根据电影id，获取电影详情
    this.getFilmInfo(this.$route.params.id)

    this.$store.commit('setPageFooter', false)
  },
  beforeDestroy() {
    this.$store.commit('setPageFooter', true)
  },
  methods: {
    ...mapActions('film', ['getFilmInfo']),
  },
}
</script>

<style lang="scss" scoped>
</style>